<template>
  <div class="sales">
    <a-page-header
      title="销售管理"
      sub-title="销售订单和退换货管理"
    />

    <a-tabs v-model:activeKey="activeTab">
      <a-tab-pane key="orders" tab="销售订单">
        <a-card>
          <a-table
            :columns="orderColumns"
            :data-source="orders"
            :pagination="pagination"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="getOrderStatusColor(record.status)">
                  {{ getOrderStatusText(record.status) }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'totalAmount'">
                ¥{{ record.totalAmount }}
              </template>
              <template v-else-if="column.key === 'action'">
                <a-space>
                  <a-button type="link" size="small">查看</a-button>
                  <a-button type="link" size="small">打印</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>

      <a-tab-pane key="returns" tab="退换货">
        <a-card>
          <a-table
            :columns="returnColumns"
            :data-source="returns"
            :pagination="pagination"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'type'">
                <a-tag :color="record.type === 'return' ? 'red' : 'orange'">
                  {{ record.type === 'return' ? '退货' : '换货' }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'amount'">
                ¥{{ record.amount }}
              </template>
              <template v-else-if="column.key === 'action'">
                <a-space>
                  <a-button type="link" size="small">处理</a-button>
                  <a-button type="link" size="small">查看</a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const activeTab = ref('orders')

const orderColumns = [
  { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
  { title: '客户', dataIndex: 'customer', key: 'customer' },
  { title: '订单时间', dataIndex: 'orderTime', key: 'orderTime' },
  { title: '订单金额', dataIndex: 'totalAmount', key: 'totalAmount' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 150 },
]

const returnColumns = [
  { title: '申请单号', dataIndex: 'returnNo', key: 'returnNo' },
  { title: '原订单号', dataIndex: 'originalOrder', key: 'originalOrder' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '商品', dataIndex: 'product', key: 'product' },
  { title: '金额', dataIndex: 'amount', key: 'amount' },
  { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
  { title: '操作', key: 'action', width: 150 },
]

const orders = ref([
  {
    orderNo: 'SO202401001',
    customer: '张三',
    orderTime: '2024-01-15 10:30',
    totalAmount: 156.8,
    status: 'completed'
  },
  {
    orderNo: 'SO202401002',
    customer: '李四',
    orderTime: '2024-01-15 11:45',
    totalAmount: 89.5,
    status: 'processing'
  }
])

const returns = ref([
  {
    returnNo: 'RT202401001',
    originalOrder: 'SO202401001',
    type: 'return',
    product: '苹果 红富士',
    amount: 25.6,
    applyTime: '2024-01-15 15:20'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})

const getOrderStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    pending: 'orange',
    processing: 'blue',
    completed: 'green',
    cancelled: 'red'
  }
  return colorMap[status] || 'default'
}

const getOrderStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.sales {
  padding: 24px;
}
</style>